<template>
  <div class="sider">
    <div class="personmessage">
      <div class="circle-avatar"></div>
      <p style="height: 20px; font-size: x-large">{{ SeekerUserData.sname }}</p>
      <p style="height: 20px; font-size: large">
        {{ SeekerUserData.sedu | seduHandler }} |
        {{ SeekerUserData.sgender }} |19岁
      </p>
    </div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleMenuSelect"
    >
      <el-menu-item index="PerRevisePassword"> 修改密码</el-menu-item>
      <el-menu-item index="PerWriteCv"> 编写简历</el-menu-item>
      <el-menu-item index="PerDeliver"> 已投递</el-menu-item>
      <el-menu-item index="PerChat"> 在线聊天</el-menu-item>
    </el-menu>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      activeIndex: "", // 默认选中的菜单项
      SeekerUserData: JSON.parse(sessionStorage.getItem("SeekerUser")),
    };
  },
  created() {
    // 在组件创建时获取当前路由的名称，并设置为 activeIndex 的初始值
    this.activeIndex = this.$route.name || "PerRevisePassword"; // 如果没有路由名称，默认为 "manage"
  },
  filters: {
    seduHandler(value) {
      switch (value) {
        case 1:
          return "小学";
        case 2:
          return "初中";
        case 3:
          return "高中";
        case 4:
          return "大学";
        case 5:
          return "研究生";
        case 6:
          return "博士";
        default:
          return ""; // 处理未知的 sedu 值
      }
    },
  },
  methods: {
    handleMenuSelect(index) {
      // 如果当前选中的菜单项已经是目标路由，则不执行重复导航
      if (this.activeIndex === index) {
        return;
      }
      switch (index) {
        case "PerRevisePassword":
          this.$router.push({ name: "PerRevisePassword" });
          break;
        case "PerWriteCv":
          this.$router.push({ name: "PerWriteCv" });
          break;
        case "PerDeliver":
          this.$router.push({ name: "PerDeliver" });
          break;
        case "PerChat":
          this.$router.push({ name: "PerChat" });
          break;
        default:
          break;
      }
    },
  },
};
</script>
    
    <style scoped>
.el-menu-vertical-demo {
  background-color: white;
}
.el-menu-item {
  /* 菜单栏元素 */
  color: black !important;
  margin-top: 80px !important;
  font-size: x-large;
}
.circle-avatar {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 5%;
  margin-left: 11%;
  border-radius: 50%;
  /* 边框半径为50%，即圆形 */
  overflow: hidden;
  /* 隐藏溢出的部分 */
  background-image: url(/public/image/头像.jpg);
  background-size: 100% 100%;
}
/* 可以根据需要自定义样式 */
</style>